import {Component, Input, Output, EventEmitter} from '@angular/core';
import {Http, RequestOptions, URLSearchParams, Response} from '@angular/http'
import {LocationDragItem,RouteDragItem} from './models';
import {ToolBar,Step} from './outerDropDiv';
import {RouteMenuComponent} from './menu';


@Component({
	selector: 'route',
	directives:[RouteMenuComponent,ToolBar],
	template:`
	<div class="sliding-menu">
	<route-menu [totalItems]="totalItems_loc" [pageSize] ="pageSize" [header]="Loc" [locArray]="locArray_loc" [subArray]="subArray_loc"></route-menu>
	<route-menu [totalItems]="totalItems_route" [pageSize] ="pageSize" [header]="Route" [locArray]="locArray_route" [subArray]="subArray_route"></route-menu>
	</div>
	<div class="sliding-content-wrapper">
	<!-- Top navigation -->
	<div class="navbar-wrapper" style="height: 126px;">
		<!-- !Primary nav bar -->
		<nav class="navbar navbar-static-top navbar-inverse margin-0 col-xs-12 padding-0" id="navigation-a" role="navigation">
			<div class="container-fluid">
				<div class="navbar-header col-lg-3 padding-0">
					<button type="button" class="hamburger-btn" style="margin-left: -15px;" [ngClass]="{active: isActive}" (click)="togglerClass('openmenu')">
					<span class="ion-navicon-round"></span></button>
					<a class="navbar-brand uppercase text-normal-size navigation-link" href="index.html">
						    <span style="font-size:32px; color:red;" class="ion-sanmina"></span>
							&nbsp;<b>Route Builder</b>
					 </a>
				</div>
			</div>
		</nav>
		<nav class="navbar navbar-default shrink mtop-0 mbottom-0 padding-0 col-xs-12 hidden-xs affix-top" id="navigation-b">
			<div class="container-fluid padding-0">
				<div class="col-md-8 col-xs-10">
					<div id="menu">
						<div class="nav navbar-nav">
							<li >
								<a class="btn navigation-link" style="font-size:18px" id="addOutDivId" (click)="addOuterDIv()">
									<span class="text-bold "><span class="ion-plus-circled"></span></span>
								</a>
							</li>

							<li *ngIf="!toolbarControl"><a class="btn navigation-link"  style="font-size:18px" (click)="deleteOuterDiv()">
							<span class="text-bold ">
							<span class="ion-minus-circled" ></span></span>
							</a></li>
							
							<li *ngIf="!toolbarControl"><a id="saveRouteStepId" class="btn navigation-link"  style="font-size:18px" >
							<span class="text-bold ">
							<span class="glyphicon glyphicon-floppy-save" ></span></span>
							</a></li>

							<li *ngIf="toolbarControl"><a (click)="addRoute()" id="saveRouteId" class="btn navigation-link"  style="font-size:18px;" >
							<span class="text-bold ">
							<span class="glyphicon glyphicon-road" ></span></span>
							</a></li>
						</div>
					</div>
				</div>
				<div class="col-xs-2 padding-0">
					<a href=".navbar-wrapper" id="btn-gotop" class="btn btn-gray-light btn-lg navbar-btn-lg pull-right hide show-on-affixed">
						<span class="ion-arrow-up-c text-biggest"></span>
					</a>
				</div>
				<div class="col-md-2 bg-gray-lighter">
					<div class="input-group hidden-sm hidden-xs">
						<span class="input-group-btn">
							<button class="btn btn-link" type="button">
								<span class="glyphicon glyphicon-search text-gray"></span>
							</button>
						</span>
						<input type="text" id="searchbar" class="form-control input-transparent" placeholder="Search for any control, icon or class…">
						
					</div>
					<!-- <input type="search" class="search-expandable pull-right" placeholder="Search for any control, icon or class…"> -->
				</div>
			</div>
		</nav>
	</div>
		<section class="container-fluid padding-0" id="main-content">
    		<!-------- !Main content -------->
			<div class="col-md-10" >
				<div id="cart">

					<div *ngIf="!toolbarControl" id="outerDivId" style="overflow:auto;height:500px;border:1px solid; margin:5px;" >
						<label style="top:10px;left:20px; position:relative;color:black;">Route Name:</label>
						<outer-drop [dropItemInnerHTML]="dropItemInnerHTML" *ngFor="let stepItem of stepItems" [stepItem]="stepItem"></outer-drop>
					</div>
				</div>
			</div>
			<div class="col-md-2 hidden-sm hidden-xs padding-0">
				<route-menu [totalItems]="totalItems_loc" [pageSize] ="pageSize" [header]="Loc" [locArray]="locArray_loc" [subArray]="subArray_loc"></route-menu>
	<route-menu [totalItems]="totalItems_route" [pageSize] ="pageSize" [header]="Route" [locArray]="locArray_route" [subArray]="subArray_route"></route-menu>
			</div>
		</section>
	</div>
	`
})
export class RouteApp{
	toolbarControl: boolean=true;

	dropItemInnerHTML: any = { toolbarControl: this.toolbarControl, passLoc: 'Pass Loc', failLoc: 'Fail Loc', fromLoc1: 'From Loc', fromLoc2: 'From Loc', fromLoc3: 'From Loc', fromLoc4: 'From Loc' };

	outDrops: Array<ToolBar>;
	
	stepItems: Array<Step>;

	outerDropDivItem: ToolBar;

	constructor(public http: Http) {
		this.getMenuList();
		this.outDrops = [new ToolBar()];
		this.stepItems = [new Step(10)];
	}

	pageSize: number=4;
	Loc = "Locations";
	Route="Sub Route"

	locArray_loc: Array<LocationDragItem>;
	locArray_route: Array<RouteDragItem>;

	subArray_loc: Array<LocationDragItem>;
	subArray_route: Array<RouteDragItem>;

	totalItems_loc: number;
	totalItems_route: number;

	private isActive: boolean = false;




	private togglerClass(className:string){
		
		this.isActive = !this.isActive;
		if (document.body.className=="")
			document.body.className = className;
		else
			document.body.className = "";
	}

	public addOuterDIv(){
		this.stepItems.push(new Step((this.stepItems.length+1)*10) );
		console.log(this.stepItems);
	}

	public deleteOuterDiv(){
		let index: number;
		for (let i = 0; i < this.stepItems.length; ++i) {
			if(this.stepItems[i].stepChecked){
				this.stepItems.splice(i, 1);
				index = i; 
				i--;
			}
		}
		for (;index < this.stepItems.length; ++index) {
			this.stepItems[index].stepValue = (this.stepItems[index - 1].stepValue) + 10;
		}
	}

	public getMenuList() {
		console.log("res");
		let opts: RequestOptions = new RequestOptions();
		let params: URLSearchParams = new URLSearchParams();
		params.set("name", "mercy");
		opts.search = params;
		this.http.get('../searchLocation', opts).subscribe(
			(res: Response) => {
				console.log(res.json());
				this.locArray_loc = res.json().locations;
				this.subArray_loc = this.locArray_loc.slice(0, this.pageSize); 
				this.totalItems_loc= this.locArray_loc.length;
				this.locArray_route = res.json().routes;
				this.subArray_route= this.locArray_route.slice(0, this.pageSize);
				this.totalItems_route= this.locArray_route.length;
			}
		);
	}

	addRoute(){
		this.toolbarControl = !this.toolbarControl;
	}
}
